<template>
  <el-dialog
    title="持续稳定性考察台账"
    :visible.sync="visible"
    :before-close="close"
    :append-to-body="true"
    :close-on-click-modal="true"
    width="60%">

    <el-card>
      <el-form label-width="80px">
        <el-form-item>
          <span slot="label">品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>
          {{ plan.productName }}
        </el-form-item>

        <el-form-item>
          <span slot="label">规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:</span>
          <span v-html="plan.productSpec + (plan.productPackSpec == null ? '' : '×' + plan.productPackSpec)" />
        </el-form-item>

        <el-form-item>
          <span slot="label">批&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span>
          {{ plan.batchNum }}
        </el-form-item>

        <el-form-item label="考察方式">
          {{ plan.stabilityModeName }}
        </el-form-item>

        <el-form-item label="试验条件">
          {{ '温度:' + (plan.envT == null ? ' ' : plan.envT) + ',湿度:' + (plan.envH == null ? '' : plan.envH) }}
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table :data="items">
        <el-table-column
          label="考察时间"
          align="right"
          width="150">
           <el-table-column
            prop="name"
            label="考察项目"
            width="120">
          </el-table-column>
        </el-table-column>
        <el-table-column
          v-for="(item, index) of times"
          :label="item.time"
          align="center"
          :key="index">
          <el-table-column
            :label="item.registCheckDate | changeTime"
            align="center">
            <template slot-scope="scope">
              {{ scope.row.checkItems[index] != null ? scope.row.checkItems[index].itemConclusionMerge : "/" }}
          </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-card>

    </el-dialog>
</template>

<script>
  import { CODE_OK } from '@/common/js/config'
  import { isBlank } from '@/common/js/utils'
  import { getTestBook } from '@/api/stability'
  export default {
    data() {
      return {
        visible: false,
        plan: {},
        times: [],
        items: [],
      }
    },
    props: ['childDataForm'],
    created() {
      if (!isBlank(this.childDataForm)) {
        this.plan = this.childDataForm
        this.getInfo()
        this.visible = true
      }
    },
    methods: {
      getInfo() {
        const params = {
          planId: this.plan.planId,
          productGmp: this.plan.productGmp,
          batchNum: this.plan.batchNum
        }
        getTestBook(params).then(res => {
          if (res.code === CODE_OK) {
            this.times = res.info.times
            this.items = res.info.items
            console.log(res)
          }else{
            this.$message.error(res.msg)
          }
        })
      },
      close() {
        this.visible = false
        this.$emit('close')
      }
    }
  }
</script>

<style scoped>
  >>> .el-form-item__content {
    line-height: 20px !important;
  }
  >>> .el-form-item__label {
    line-height: 20px;
  }
  >>> .el-form-item {
    margin-bottom: 5px;
  }
  >>> .el-table thead.is-group th {
    background: none;
  }
  >>> .el-table thead.is-group tr:first-of-type th:first-of-type {
    border-bottom: none;
  }
  >>> .el-table thead.is-group tr:first-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 75px; /*这里需要自己调整，根据td的宽度和高度*/
    top: 0;
    left: 0;
    background-color: grey;
    opacity: 0.3;
    display: block;
    transform: rotate(-51deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
  }
  >>> .el-table thead.is-group tr:last-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 75px; /*这里需要自己调整，根据td的宽度和高度*/
    bottom: 0;
    right: 0;
    background-color: grey;
    opacity: 0.3;
    display: block;
    transform: rotate(-51deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: bottom;
    // background:red;
  }
</style>
